<template>
	<view class="">
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#FC5B03"></u-loading>
			<view>加载中</view>
		</view>
		<template v-else>

			<view class="intro_info">
				<view class="intro_title">{{goods_info.name}}</view>
				<view class="intro_date">
					<view class="">使用截止日期：{{goods_info.end_at}}</view>
				</view>
				<view class="intro_img">
					<image :src="goods_info.intro_image" mode="widthFix"></image>
				</view>
				<view class="intro_content">{{goods_info.intro}}</view>
				<view class="car_names">
					适用车型：{{goods_info.car_names}}
				</view>
				<view class="car_names">
					部分车型最高可减免：￥{{goods_info.oprice}}
				</view>
			</view>
			
			<view class="money_footer" style="justify-content: space-between;" v-if="order_info.status == 0">
				<view class="footer_le flex align-center justify-between">
					<view class="footer_le_1">
						<text>￥</text>
						<text class="footer_le_1_1">{{order_info.num*order_info.price}}</text>
						<text class="footer_le_1_2">
							<text class="footer_le_1_3">￥</text>
							<text>{{goods_info.oprice}}</text>
						</text>
					</view>
					<!-- <view class="box_info">
						<u-number-box bg-color="#FC5B03" color="#fff"  v-model="num" size="22" :min="1" :max="20" @change="valChange"></u-number-box>
					</view> -->
				</view>
				<view class="footer_ri">
					<view class="footer_ri_2" @tap.stop="buyCoupon">继续支付</view>
				</view>
			</view>
			<view class="money_footer" v-if="order_info.status == 1 && order_info.left_num > 0">
				<!-- #ifdef MP-TOUTIAO -->
				<view class="footer_ri">
					<view class="footer_ri_2" @tap.stop="refundShow=true">退款</view>
				</view>
				<!-- #endif -->
				
				<view class="footer_ri">
					<view class="footer_ri_2" @tap.stop="predetermine">预定车辆</view>
				</view>
			</view> 
			
			<view class="customer_view" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/my/customer/customer`">
				<view class="flex align-center">
					<image :src='STATIC_URL+"289.png"'></image>
					<view class="customer_btn_text">人工客服</view>
				</view>
				<view class="customer_btn_text">08:00 - 21:00</view>
			</view>
			<view style="height: 140rpx;"></view>
		</template>
		<!-- <view class="footer_le_2" @tap.stop="handleJumpDiy" data-type="navigateTo"
			:data-url="`/pages/my/customer/customer`">
			<image :src='STATIC_URL+"287.png"'></image>
			<view class="footer_le_2_1">客服</view>
		</view> -->

		<!-- <u-modal v-model="refundShow" content="确认退款吗？" :show-cancel-button="true" confirm-color="#FC5B03"
			@confirm="confirmCancel"></u-modal> -->
			
			
		<u-popup v-model="refundShow" mode="bottom" border-radius="28">
			<view class="account_pop">
				<view class="account_title">
					退款
				</view>
				<scroll-view class="account_list" :scroll-y="true">
					<view class="account_item" v-for="(item, index) in refoundList" :key="index"
						@tap.stop="selectRefound(item.name)">
						<view class="account_item_text flex align-center">
							<text>{{item.name}}</text>
						</view>
						<image v-if="refound_name == item.name" class="account_item_icon"
							:src='STATIC_URL+"7.png"'></image>
						<image v-else class="account_item_icon" :src='STATIC_URL+"8.png"'></image>
					</view>
				</scroll-view>
				<view class="refound_view flex align-center justify-between">
					<view class="">退款数量：</view>
					<u-number-box bg-color="#FC5B03" color="#fff"  v-model="refound_num" size="22" :min="1" :max="order_info.left_num" ></u-number-box>
				</view>
				
				<view class="account_btn">
					<view class="account_btn_1" @tap.stop="closeRefound">取消</view>
					<view class="account_btn_2" @tap.stop="confirmRefound">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: true,
				refundShow: false,
				order_info: {}, // 团购订单信息
				goods_info: {}, // 团购商品信息
				refound_num: 1,
				totalPrice: 0,
				id: "42355475181867008", // 团购商品id

				pollIntervalId: null,
				selectRefoundInfo: {},
				refoundList: [
					{
						id: 1,
						name: '买多了/买错了'
					},
					{
						id: 2,
						name: '计划有变，暂时不需要了'
					},
					{
						id: 3,
						name: '使用规则不合理'
					},
					{
						id: 4,
						name: '距离太远'
					},
					{
						id: 5,
						name: '朋友/网上评价不好'
					}
				],
				refound_name: "买多了/买错了",
				is_submit: false,
				outRefundNo: "",
			}
		},
		onLoad(options) {
			let {
				id
			} = options;
			if (id !== undefined) this.id = id;
			this.getDetails();
		},
		onShow() {

		},
		onUnload() {
			this.stopPolling();
		},
		methods: {
			// 获取团购订单详情  userCouponDetails
			getDetails() {
				this.$api.post(global.apiUrls.userCouponDetails, {
					id: this.id
				}).then(res => {
					console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.order_info = res.data.data;
						this.goods_info = res.data.data.goods_info;
						this.totalPrice = res.data.data.price * this.num;
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			// 购买团购券
			buyCoupon() {
				let _this = this;
				tt.continueToPay({
					outOrderNo: _this.id, // 外部订单号 2个订单号必填一个
					success: (res) => {
						const {
							orderId,
							outOrderNo
						} = res;
						console.log("success res", res);
						console.log("orderId", orderId, "outOrderNo", outOrderNo);
						_this.is_submit = false;
						_this.isShow = true;
						_this.getDetails();
					},
					fail: (res) => {
						const {
							orderId,
							outOrderNo,
							errNo,
							errMsg,
							errLogId
						} = res;
						if (errLogId) {
							console.log("查询订单信息失败", errNo, errMsg, errLogId);
						}
						if (orderId || outOrderNo) {
							console.log("支付失败", errNo, errMsg, orderId, outOrderNo);
						}
						_this.$message.info('支付已取消');
						_this.is_submit = false;
					},
				});
			},
			handleRefund(event) {
				const {
					status,
					result
				} = event.detail;
				if (status === 'success') {
					this.isShow = true;
					this.startPolling();
				}
			},
			onError(event) {
				this.$message.info(event.detail.errMsg);
			},
			applyRefund(event) {
				const {
					orderId
				} = event.detail;
				const itemOrderList = [{
					itemOrderId: 'ots74032542074925898654163',
					refundAmount: 1899
				}]
				// let itemOrderList = [];
				// this.detailsInfo.dy_payments.forEach((v, k) => {
				// 	itemOrderList.push({
				// 		itemOrderId: v.payment_trade,
				// 		// refundAmount: 1899,
				// 		refundAmount: this.formatNumber(v.order_amount*(Number(this.refund_percentage)/100)) * 100
				// 	})
				// })
				const extra = {
					orderId,
					itemOrderList
				};
				return new Promise(resolve => {
					resolve(extra); // extra 透传至服务端时，当中的 itemOrderList 会被删除
					console.log(extra);
				});
			},

			formatNumber(num) {
				let strNum = String(num);
				let decimalIndex = strNum.indexOf('.');

				if (decimalIndex !== -1) {
					let decimalPart = strNum.slice(decimalIndex + 1, decimalIndex + 3);
					return strNum.slice(0, decimalIndex + 1) + decimalPart;
				} else {
					return strNum;
				}
			},
			startPolling() {
				this.pollIntervalId = setInterval(this.checkRefund, 1000);
				setTimeout(() => {
					this.stopPolling();
				}, 10000); // 10秒后停止轮询
			},
			stopPolling() {
				if (this.pollIntervalId) {
					clearInterval(this.pollIntervalId);
					this.pollIntervalId = null;
				}
			},
			checkRefund() {
				this.$api.get(global.apiUrls.checkOrderRefund, {
					type: 1,
					refund_no: this.outRefundNo
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						if (res.data.data.status == 1) {
							uni.hideLoading();
							this.$message.info('退款成功');
							this.getDetails();
							this.stopPolling();
						}
					} else {
						uni.hideLoading();
						this.$message.info(res.data.info);
					}
				}).catch(err => {
					uni.hideLoading();
				})
			},
			confirmRefound() {
				let _this = this;
				_this.refundShow = false;
				
				let skulist = [{
					quantity: _this.refound_num, // 退货数量 必填
					price: Number(_this.order_info.price) * 100, // 商品价格 必填
					skuId: String(_this.goods_info.out_id),
					skuType: 1, // 商品类型 必填
					goodsInfo: {
						goodsName: _this.goods_info.name, // 商品名称 必填
						goodsPhoto: _this.goods_info.image, // 商品图片链接 必填
						goodsId: String(_this.goods_info.out_id), // 商品ID 必填
						goodsType: 1
					}
				}]
				tt.applyRefund({
					refundInfo: {
						reason: [_this.refound_name], // 退款理由 必填
					},
					outOrderNo: _this.id, // 外部订单号 必填
					skuList: skulist,
					callbackData: {}, // 透传数据 会被 JSON.stringfy 化 非必填
					// refundTotalAmount:1, // 老订单指定金额退款，新订单该参数无效
					success: res => {
						const {
							orderId,
							outRefundNo,
							refundId
						} = res;
						console.log('申请退款成功');
						console.log('orderId', orderId, 'outRefundNo', outRefundNo, 'refundId', refundId);
						_this.outRefundNo = outRefundNo;
						_this.$message.info('提交成功');
						_this.startPolling();
						setTimeout(() => {
							uni.showLoading({
								title: '查询退款状态中'
							})
						}, 800)
					},
					fail: res => {
						const {
							errNo,
							errMsg,
							errLogId
						} = res;
						console.log('申请失败', errNo, errMsg, errLogId);
						_this.$message.info('申请失败,请联系客服处理');
					},
				});
			},
			closeRefound() {
				this.refundShow = false;
				this.refound_name = this.refoundList[0].name;
			},
			// 选择子账号
			selectRefound(item) {
				this.refound_name = item;
			},
			predetermine() {
				uni.switchTab({
					url: '/pages/tabBar/index/index'
				})
			},
			valChange(e) {
				this.totalPrice = this.certificateInfo.price * e.value;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.money_footer {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: calc(0rpx + var(--window-bottom));
		left: 0;
		background: #fff;
		z-index: 10;
		padding: 0 24rpx 0 24rpx;

		.footer_le {
			.footer_le_1 {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 30rpx;
				color: #FC5B03;

				.footer_le_1_1 {
					font-weight: bold;
					font-size: 40rpx;
					color: #FC5B03;
				}
				.footer_le_1_2 {
					margin-left: 16rpx;
					color: #999;
					text-decoration: line-through;
					font-size: 30rpx;
				}
				.footer_le_1_3 {
					font-size: 26rpx;
				}
			}

			.box_info {
				margin-left: 28rpx;
			}
		}

		.footer_ri {
			display: flex;
			align-items: center;

			.footer_ri_1 {
				font-weight: 400;
				font-size: 26rpx;
				color: #1A66FA;
			}

			.footer_ri_2 {
				margin-left: 24rpx;
				width: 240rpx;
				height: 84rpx;
				background: #FC5B03;
				border-radius: 80rpx;
				font-weight: bold;
				font-size: 34rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC, PingFang SC;
			}
		}
	}

	.intro_info {
		margin: 100rpx 28rpx 28rpx;

		.intro_title {
			font-size: 40rpx;
			font-weight: 600;
		}

		.intro_date {
			font-size: 32rpx;
			color: #FC5B03;
			margin-top: 24rpx;
		}

		.intro_img {
			margin-top: 24rpx;

			image {
				width: 100%;
				height: auto;
				border-radius: 12rpx;
			}
		}

		.intro_content {
			margin-top: 24rpx;
			font-size: 28rpx;
			line-height: 32rpx;
		}

		.car_names {
			margin-top: 24rpx;
		}
	}

	.footer_le_2 {
		position: fixed;
		right: 32rpx;
		bottom: 150rpx;

		image {
			width: 48rpx;
			height: 48rpx;
			transform: translateY(5rpx);
		}

		.footer_le_2_1 {
			font-weight: 500;
			font-size: 26rpx;
			color: #FC5B03;
			transform: translateY(-5rpx);
		}
	}

	.refund_pop {
		padding: 0 30rpx 30rpx;

		.refund_title {
			font-size: 34rpx;
			text-align: center;
			padding: 28rpx 0;
		}

		.refund_view {
			font-size: 28rpx;
		}

		.refund_money {
			font-weight: 600;
			margin: 16rpx 0 24rpx;
		}

		.refund_type {
			padding: 0 24rpx;
			margin: 24rpx 0;

			.refund_type_item {
				background: #f6f6f6;
				width: 300rpx;
				height: 78rpx;
				border-radius: 12rpx;
			}

			.active_type_item {
				background: #fff;
				color: #1A66FA;
				border: 1px solid #1A66FA;
			}
		}

		.refund_input {
			border: 1px solid #eee;
			margin: 24rpx 0;
			padding: 10rpx 24rpx;
			font-size: 28rpx;
			border-radius: 8rpx;
		}

		.refund_custom {
			margin: 24rpx 0;
			font-size: 26rpx;

			.refund_custom_price {
				color: #FC5B03;
			}
		}

		.refund_tips {
			font-size: 24rpx;
			color: #FC5B03;
			margin-top: 24rpx;
		}

		.refund_btn {
			padding: 32rpx 0 0;
			border-top: 1px solid #eee;
			margin: 24rpx 0;

			.refund_btn_1 {
				background: #f6f6f6;
				width: 300rpx;
				height: 78rpx;
				border-radius: 12rpx;
			}

			.refund_btn_2 {
				color: #fff;
				background: #FC5B03;
				width: 300rpx;
				height: 78rpx;
				border-radius: 12rpx;
			}
		}
	}
	.customer_view {
		width: 100%;
		position: fixed;
		z-index: 99;
		height: 78rpx;
		top: 0;
		right: 0;
		// background: #FC5B03;
		background: linear-gradient(to right, #FC5B03, #FEB16A);
		color: #fff;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		image {
			width: 40rpx;
			height: 40rpx;
		}
		.customer_btn_text {
			font-size: 32rpx;
			margin-left: 16rpx;
		}
	}
	
	.account_pop {
		.account_title {
			text-align: center;
			font-size: 32rpx;
			font-weight: 600;
			padding: 28rpx 0;
		}
	
		.account_list {
			padding: 0 28rpx;
			height: 360rpx;
	
			.account_item {
				padding: 16rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
	
				.account_item_text {
					font-size: 30rpx;
					font-weight: 500;
				}
	
				.short_name {
					font-size: 28rpx;
					color: #999;
					margin-left: 5rpx;
				}
	
				.account_item_icon {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		.refound_view {
			margin: 16rpx 28rpx;
		}
	
		.account_btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx 28rpx 48rpx;
	
			.account_btn_1 {
				width: 300rpx;
				height: 80rpx;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				font-size: 30rpx;
			}
	
			.account_btn_2 {
				width: 300rpx;
				height: 80rpx;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FC5B03;
				color: #fff;
				font-size: 30rpx;
			}
		}
	}
</style>